<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="8">
          <el-tag type="dark">进销存管理系统</el-tag>
          <el-tag type="dark">用户名:{{userName}}</el-tag>
        </el-col>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8" align="right">
         <el-button type="primary" size="small" @click="updateUser">修改信息</el-button>
         <el-button type="primary" size="small" @click="logOut">退出登录</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-col :span="24">
            <el-menu
              default-active="2"
              :default-openeds="['1']"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              router
              >
              <template v-for="x in list">
              <el-submenu :index="x.index">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{x.name}}</span>
                </template>
                <template v-for="y in x.children">
                <el-menu-item :index="y.url">
                  <template>{{y.name}}</template>
                </el-menu-item>
                </template>
              </el-submenu>
              </template>
            </el-menu>
          </el-col>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default{
    name:"index",
    data(){
      return{
        userName:"",
        list:[],
        ws:""
      }
    },
    methods:{
      index(){
        var self = this;
        var http = this.$http.get("/api/user/queryByName",{params:{userName:this.userName}});
        http.then(function(rs){
          if(rs.data.code == 200){
            self.list = rs.data.data
          }else if(rs.data.code == 505){
            alert(rs.data.msg)
            self.$router.replace("/");
            self.$router.go(0)
          }
        })
      },
      createeWs(){//创建websokect对象
        var self = this
        var url = "ws://localhost:8081/user/" + this.userName
        console.log(url)
        this.ws = new WebSocket(url);
        //打开事件
        this.ws.onopen = function(){
          //发送用户名给服务器
          self.ws.send(self.userName)
        }
        //关闭事件
        this.ws.onclose = function(){
        }
        //发送事件
        //接送服务端发送的消息
        this.ws.onmessage = function(msg){
          if(msg.data == "0"){
            self.$alert("你的账户已经在其他地方登录","提示下线",{
                confirmButtonText:"我要下线",
                callback:function(){
                  self.$router.replace("/");
                  self.$router.go(0)
                }
            })
          }else{
            self.open(msg.data)
          }
        }

        //异常触发事件
        this.ws.onerror = function(rs){
        }
      },
      send(i){//发送
        this.user.state = i;
        this.ws.send(JSON.stringify(this.user));
      },
      open(data) {
          const h = this.$createElement;
           this.$notify({
            title: '欢迎用户' + this.userName + "登录" ,
            message: h('i', { style: 'color: teal'}, "欢迎欢迎，热烈欢迎！")
        })
      },
      updateUser(){
        this.$router.replace("/index/updateUser");
      },
      logOut(){
        var self = this
        var http = this.$http.get("/api/user/logOut",);
        http.then(function(rs){
          alert(rs.data.msg);
          if(rs.data.code == 200){
            console.log(rs)
            self.$router.replace("/");
            self.$router.go(0)
            sessionStorage.removeItem("name")
          }
        })
        }
    },
    mounted() {
      this.userName = sessionStorage.getItem("name");
      this.createeWs();
      this.index();
    }
  }
</script>

<style>
  html,body{
    margin: 0px;
    height: 100%;
  }
  .el-header {
      background-color: #444444;
      color: white;
      padding-top: 15px;

    }

    .el-aside {
      background-color: #545c64;
      color: white;
      height: 100%;
    }

    .el-main {
      background-color: white;
      color: #333;
    }
    .el-container {
        height: 100%;
      }
</style>
